<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动2</title>

    <style>
       .c1{
            height: 50px;
            width: 50px;
            margin: 5px;
            border: 2px red dashed;
            padding: 10px;
            float: left;
        }
        div{
            border: 2px #002aff solid;
        }
        .clear:after{
            content: '';
            display: block;
            clear: both;
        }


    </style>

</head>
<body>

<div class="clear">
    <div class="c1">1</div>
    <div class="c1">2</div>
    <div class="c1">3</div>
    <div class="c1">4</div>
    <div class="c1">5</div>
    <div class="c1">6</div>
    <div class="c1">7</div>
    <div class="c1">8</div>
    <div class="c1">9</div>

</div>

</body>
</html>